<template>
	<view class="container b-f">
		<!-- 头部背景图 -->
		<view class="dealer-bg"><image mode="widthFix" :src="background"></image></view>
		<view class="widget-body b-f dis-flex flex-dir-column flex-y-center">
			<form @submit="formSubmit" report-submit="true" style="z-index: 3;">
				<!-- 提现佣金 -->
				<view class="widget widget-capital m-top20 b-f dis-flex flex-dir-column">
					<view class="capital-item dis-flex flex-x-between flex-y-center">
						<view class="item-left">可提现佣金：</view>
						<view class="item-right c-violet">
							<text class="f-24">￥</text>
							<text class="f-34">{{ userInfo.balance }}</text>
						</view>
					</view>
					<view class="capital-item dis-flex flex-y-center">
						<view class="item-left">提现金额：</view>
						<view class="item-right flex-box"><input name="money" placeholder="请输入要提取的金额" v-model="name" /></view>
					</view>
				</view>
				<!-- 最低提现金额 -->
				<view class="capital-lowest m-top20 f-24 col-7 t-r">最低提现佣金{{ min_money }}元</view>

				<!-- 提现方式 -->
				<view class="widget widget-form m-top20 b-f dis-flex flex-dir-column">
					<view class="form-title f-28">提现方式</view>
					<view class="form-box">
						<block v-for="(item, index) in pay_type" :key="index">
							<!-- <block v-if="item.value == 10"> -->
							<!-- 微信支付 -->
							<view class="form-field dis-flex flex-y-center">
								<view class="form-radio dis-flex flex-y-center" @tap.stop="toggleChecked" :data-payment="item.value">
									<text class="radio-icon suifont sui-radio" :class="{ 'c-violet': payment == item.value, 'col-bb': payment != item.value }"></text>
									<text class="f-28">{{ item.name }}</text>
								</view>
							</view>
							<block v-if="payment == 20 && item.value == 20">
								<view class="form-field dis-flex flex-y-center">
									<view class="field-input flex-box"><input name="alipay_name" placeholder="请输入姓名" /></view>
								</view>
								<view class="form-field dis-flex flex-y-center">
									<view class="field-input flex-box"><input name="alipay_account" placeholder="请输入支付宝账号" /></view>
								</view>
							</block>

							<block v-if="payment == 30 && item.value == 30">
								<view class="form-field dis-flex flex-y-center">
									<view class="field-input flex-box"><input name="bank_name" placeholder="请输入姓名" value="" /></view>
								</view>
								<view class="form-field dis-flex flex-y-center">
									<view class="field-input flex-box"><input name="bank_account" placeholder="请输入开户行名称/地址" value="" /></view>
								</view>
								<view class="form-field dis-flex flex-y-center">
									<view class="field-input flex-box"><input name="bank_card" placeholder="请输入银行卡号" value="" /></view>
								</view>
							</block>
							<!-- </block> -->
						</block>
					</view>
				</view>
				<!-- 提交申请 -->
				<view class="form-submit dis-flex flex-x-center"><button formType="submit" :disabled="disabled">提交申请</button></view>
			</form>
		</view>
	</view>
</template>

<script>
// import Route from '@/utils/Route.js';
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {
			background: '',
			min_money: 0,
			dealer: {},
			words: {},
			payment: 20,
			pay_type: [],
			name: '',
			disabled: false
		};
	},
	onShow: function() {
		// 获取分销商提现信息
		this.getDealerWithdraw();
		this.refreshUserInfo();
	},
	methods: {
		/**
		 * 获取分销商提现信息
		 */
		getDealerWithdraw() {
			this.$u.api.getWithdrawSetting().then(res => {
				let data = res.data;
				this.pay_type = data.pay_type;
				this.background = data.background;
				this.min_money = data.min_money;
				this.payment = data.pay_type[0].value;
				// this.dealer = data.dealer;
				// this.isData = data.isData;
				// this.settlement = data.settlement;
			});
		},
		/**
		 * 切换提现方式
		 */
		toggleChecked(e) {
			this.payment = e.currentTarget.dataset.payment;
		},
		/**
		 * 提交申请
		 */
		formSubmit: function(e) {
			let values = e.detail.value;

			// 验证可提现佣金
			if (this.userInfo.balance <= 0) {
				Tools.showError('当前没有可提现佣金');
				return false;
			}
			// 验证提现金额
			if (!values.money || values.money.length < 1) {
				Tools.showError('请填写提现金额');
				return false;
			}
			// 按钮禁用
			this.disabled = true;
			// 提现方式
			values['pay_type'] = this.payment;
			// 数据提交
			this.$u.api
				.applyWithdrawSubmit(JSON.stringify(values))
				.then(res => {
					Tools.showError(res.msg, () => {
						this.redirectTo({
							url: '/pageUser/withdraw/list/list'
						});
					});
					this.getDealerWithdraw();
					this.refreshUserInfo();
					this.disabled = false;
				})
				.catch(e => {
					this.disabled = false;
				});
			// this.$post(
			// 	this.$api.submitUserDealerWithdraw,
			// 	{ data: JSON.stringify(values) },
			// 	res => {
			// 		this.getDealerWithdraw();
			// 		Tools.showError(res.msg, () => {
			// 			Route.navigateTo({
			// 				url: '../list/list'
			// 			});
			// 		});
			// 	},
			// 	null,
			// 	() => {
			// 		this.disabled = false;
			// 	}
			// );
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}

.c-violet {
	color: $theme-main-color;
}

.col-bb {
	color: #bbb;
}

.dealer-bg {
	image {
		width: 100%;
	}
}

.widget-body {
	.widget {
		width: 700rpx;
		box-sizing: border-box;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.11);
		border-radius: 12rpx;
	}
}

/* 提现金额 */

.widget-capital {
	padding: 10rpx 0;
	margin-top: -60rpx;
	.capital-item {
		height: 80rpx;
		padding: 10rpx 35rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #e7e7e7;
		box-sizing: border-box;
		&:last-child {
			border-bottom: none;
		}
		.item-left {
			margin-right: 20rpx;
		}
	}
}

.capital-lowest {
	width: 700rpx;
	padding-right: 20rpx;
	box-sizing: border-box;
}

/* 提现方式 */

.widget-form {
	padding: 10rpx 0 20rpx 0;
	.form-title {
		padding: 16rpx 35rpx;
		border-bottom: 1rpx solid #e7e7e7;
	}
	.form-box {
		padding: 20rpx 35rpx;
	}
	.form-field {
		height: 80rpx;
		padding: 0;
		box-sizing: border-box;
		font-size: 28rpx;
		.radio-icon {
			font-size: 38rpx;
			margin-right: 12rpx;
		}
		.field-input {
			input {
				background-color: #f9f9f9;
				height: 70rpx;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
			}
		}
	}
}

/* 提交申请 */

.form-submit {
	margin-top: 40rpx;
	button {
		font-size: 30rpx;
		background: $theme-main-color;
		border: 1rpx solid $theme-main-color;
		color: white;
		border-radius: 50rpx;
		padding: 0 120rpx;
		&[disabled] {
			opacity: 0.7;
			color: white;
		}
	}
}
</style>
